<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div #btn{
            width: 100%;
            margin-right: auto;
            border: solid red 0px;
        }
        #main{
            margin: auto; width: 1000px;height:600px; border: solid red 0px
        }
        #commons{
            margin: auto; width: 1000px;height:100px; border: solid red 0px;text-align: center;
        }

    </style>
<%--    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>--%>
</head>


<body>
    <div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <section class="content-header">
        <h1>
            统计管理
            <small>数据统计</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="${pageContext.request.contextPath}/report/reportForm?operation=list"><i class="fa fa-dashboard"></i> 首页</a></li>

        </ol>
    </section>
    <!-- 内容头部 /-->
        <div id="btn" align="center" >
<%--            <h1>用户注册量走势图</h1>--%>
            <input type="button"  value="2017"/>
            <input type="button"  value="2018"/>
            <input type="button"  value="2019"/>
            <input type="button"  value="2020"/>
            <input type="button"  value="2021"/>
            <input type="button"  value="2022"/>
        </div>
        <div id="report">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" class="mid" ></div>

            <div id="commons" class="mid" >
                <font size="5px" color="#dc143c" ><p id="currentyear"></p></font>
            </div>
        </div>



            <%--                <div id="main" style="width: 600px;height:400px;"></div>--%>




    </div>
</body>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                // data: [820, 932, 901, 934, 1290, 1330, 1320],
                data: [] ,
                type: 'line',
                smooth: true
            }
        ]
    };
    option && myChart.setOption(option);

    $('input[type="button"]').click(function (){
        let year = $(this).val();
        // alert(year);
        $("#currentyear").text(year+"年用户注册量走势图")  ;

        $.ajax({
            url:"/report/reportForm",
            data:"operation=reFind&year="+year,
            type:"post",
            dataType:"json",
            success: function (result) {
               // let da = JSON.parse(data);
               //  alert(result);
                show(result)
            },
            error:function () {
                alert("请求失败");
            }
        });
    });

    function show (dataArr) {

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        var dataArr;
        option = {
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    // data: [820, 932, 901, 934, 1290, 1330, 1320],
                    data: dataArr ,
                    type: 'line',
                    smooth: true
                }
            ]
        };
        option && myChart.setOption(option);

    }


</script>


</html>